// import * as d3 from 'd3';

// drawer控制
export const useDrawerControl = () => {
  const drawerVisible = ref(false);
  const setDrawerVisible = visible => {
    drawerVisible.value = visible;
  };
  const title = ref('');
  const setTitle = t => {
    title.value = t;
  };

  return [drawerVisible, setDrawerVisible, title, setTitle];
};
export const rangeType = {
  d: {
    type: 'daterange',
    fmt: 'YYYY-MM-DD',
    default: [dayjs().subtract(30, 'day').format('YYYY-MM-DD'), dayjs().subtract(1, 'day').format('YYYY-MM-DD')],
  },
  m: {
    type: 'monthrange',
    fmt: 'YYYY-MM',
    default: [dayjs().subtract(5, 'month').format('YYYY-MM'), dayjs().format('YYYY-MM')],
  },
  y: { type: 'yearrange', fmt: 'YYYY', default: [dayjs().subtract(2, 'year').format('YYYY'), dayjs().format('YYYY')] },
};
// 时间范围选择form
export const useDateForm = dateType => {
  const dateRange = ref(rangeType[dateType].default);
  const dateParams = ref({
    startDate: dateRange.value[0],
    endDate: dateRange.value[1],
    dateType,
  });
  const chooseDay = ref(null);
  const disabledDate = time => {
    if (!chooseDay.value) {
      return false;
    }
    const afterDate = {
      d: dayjs(time).isAfter(dayjs(chooseDay.value).add(30, 'day')),
      m: dayjs(time).isAfter(dayjs(chooseDay.value).add(5, 'month')),
      y: dayjs(time).isAfter(dayjs(chooseDay.value).add(2, 'year')),
    };
    const beforeDate = {
      d: dayjs(time).isBefore(dayjs(chooseDay.value).subtract(30, 'day')),
      m: dayjs(time).isBefore(dayjs(chooseDay.value).subtract(5, 'month')),
      y: dayjs(time).isBefore(dayjs(chooseDay.value).subtract(2, 'year')),
    };
    return afterDate[dateParams.value.dateType] || beforeDate[dateParams.value.dateType];
  };
  const dateTypeChange = val => {
    chooseDay.value = null;
    dateRange.value = rangeType[val].default;
    dateParams.value.startDate = dateRange.value[0];
    dateParams.value.endDate = dateRange.value[1];
  };
  const dateChange = val => {
    if (val) {
      dateParams.value.startDate = val[0];
      dateParams.value.endDate = val[1];
    } else {
      chooseDay.value = null;
    }
  };

  return [dateRange, dateParams, chooseDay, disabledDate, dateTypeChange, dateChange];
};

// export const useD3DrawImg = imgContainer => {
//   const container = d3.select(imgContainer.value);
//   const width = container.node().clientWidth;
//   const height = container.node().clientHeight;
//   const svg = container
//     .append('svg')
//     .attr('viewBox', `0 0 ${width} ${height}`)
//     .attr('width', width)
//     .attr('height', height);
//   // .attr('preserveAspectRatio', 'xMidYMid meet');
//   return svg;
// };
